<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/classteacher/js/jquery-3.5.0.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
    <script src="../bootstrap/popper.min.js"></script>
    <script src="../bootstrap/bootstrap.min.js"></script>
    <script src="/classteacher/Vue/Vue.js"></script>
    <script src="/classteacher/Vue/axios.js"></script>
    <script src="layui/layer/layer.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<style>
    body {
        background-color: rgba(192, 192, 192, 0.3);
    }
</style>
<body>
<div id="app" class="container">
    <br>
    <table class="table table-striped">
        <tr>
            <td>
                原密码：<input type="password" id="pwd">
            </td>
        </tr>
        <tr>
            <td>
                新密码：<input type="password" v-model="newPwd">
            </td>
        </tr>
        <tr>
            <td>
                确认密码：<input type="password" v-model="affirmPwd">
            </td>
        </tr>
        <tr>
            <td>
                将会向您的手机　
                <mark>{{phone}}</mark>
                　发送一条验证短信
            </td>
        </tr>
        <tr>
            <td>
                手机验证码：<input type="text" v-model="authCode">　
                <button class="btn btn-warning" @click="code" id="send">获取手机验证码</button>
            </td>
        </tr>
        <tr>
            <td>
                <br>　　
                <button class="btn btn-primary" @click="update">修改</button>
            </td>
        </tr>
    </table>


</div>
<script>

    //牟强

    var token = localStorage.getItem("token");
    var refreshToken = localStorage.getItem("refreshToken");
    new Vue({
        el: "#app",
        data: {
            originPwd: '',
            newPwd: '',
            affirmPwd: '',
            phone: '',
            authCode: '',
            teacherId: ''
        },
        methods: {
            update: function () {
                console.log(this.newPwd);
                console.log(this.affirmPwd);
                let newpwd = this.newPwd;
                let affirmPwd = this.affirmPwd;
                let originPwd = this.originPwd;
                let pwd = $("#pwd").val();
                if (pwd == null || pwd == '' || newpwd == null || newpwd == '' || affirmPwd == null || affirmPwd == '') {
                    layer.msg("密码框不能为空");
                } else if (newpwd != affirmPwd) {
                    layer.msg("两次输入的密码不一致");
                } else if (originPwd != pwd) {
                    layer.msg("原密码不正确");
                } else {
                    let params = new URLSearchParams();
                    params.append("originPwd", pwd);
                    params.append("newPwd", newpwd);
                    params.append("affirmPwd", affirmPwd);
                    params.append("rId", this.teacherId);
                    axios.post("alterPwd", params, {
                        headers: {
                            "token": token,
                            "refreshToken": refreshToken
                        }
                    }).then(res => {
                        console.log(res.data);
                        if (res.data.code == 0) {
                            layer.msg("修改成功");
                        }
                    });
                }

            },
            code: function () {
                layer.msg("该功能维护中。。。");
                return;
                let params = new URLSearchParams();
                params.append("teacherId", this.teacherId);
                axios.post("sendCode", params, {
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }).then(res => {
                    console.log(res.data);
                });
            }
        },
        mounted() {
            axios.get("initPwd", {
                headers: {
                    "token": token,
                    "refreshToken": refreshToken
                }
            }).then(res => {
                console.log(res.data);
                this.phone = res.data.data.tel;
                this.teacherId = res.data.data.tcId;
                this.originPwd = res.data.data.password;
            })
        }
    })
</script>

</body>
</html>